<template>
	<view class="container">
		<view class="page-body">
			<view class="page-section">
				<view class="video_container">
					<video id="myVideo" :src="src.fileUrl" style="border-radius: 10rpx;width: 686rpx;
					height: 400;" page-gesture enable-progress-gesture show-center-play-btn="{{true}}" enable-play-gesture
						@play="bindplayClick" @pause="bindpauseClick">
					</video>

				</view>
				<view class="title">
					{{src.resourceName}}
				</view>
				<uv-divider></uv-divider>
				<view style="font-size: 35rpx;">相关视频</view>
				<view class="vedio_container">
					<view class="vedio" v-for="item in top">
						<uv-image class="image" radius="8rpx" width="332rpx" height="208rpx" @click="tiao(item)"
							:src="item.cover"></uv-image>
						<!-- 						<view class="redio">
							<text class="time">12:21</text>
						</view> -->
						<text class="image-text">{{item.resourceName}}</text>
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		onMounted,
		ref
	} from "vue";
	onMounted(() => {
		init();
		getTop();
	})
	import Request from '@/js_sdk/luch-request/luch-request/index.js' // 下载的插件
	const http = new Request();
	const top = ref()
	const getTop = (e) => {
		const book = uni.getStorageSync('vedio')
		http.get('/ruralLibrary/resource/books/' + book, {}).then(
			st => {
				console.log('tops', st.data.data[0].bookTop)
				top.value = st.data.data[0].bookTop.splice(0, 6);
				console.log('top', top.value)
			})
	}
	const src = ref({
		fileUrl: '',
		fileName: ''
	});
	const tiao = (i) => {
		let urls = '';
			urls = '/pages/index/videoDetails/videoDetails?id=' + i.resourceId
		uni.navigateTo({
			url: urls
		})
	}
	const init = () => {
		src.value = uni.getStorageSync('videoUrl')

		console.log('src', src.value)
	}
	const data = reactive({
		button: true,
		list: [{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				name: '三国演义'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				name: '水浒传'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				name: '西游记'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				name: '西游记'
			}
		],
		categoty: [
			'电子书',
			'有声图书',
			'报纸'
		]
	});
	const bindplayClick = () => {
		console.log("触发了1")
		data.button = data.button == true ? false : true
	}

	const bindpauseClick = () => {
		console.log("触发了d")
		data.button = data.button == true ? false : true
	}
	const click = () => {
		console.log("触发了d")

		bindpauseClick();
	}
</script>

<style>
	.time {
		color: #fff;
		font-size: 25rpx;
	}

	.redio {
		/* 图标容器内边距，根据需要自行设置 */
		position: absolute;
		bottom: 65rpx;
		right: 15rpx;

		padding: 4rpx 8rpx;
		border-radius: 4rpx;
		font-size: 25rpx;
	}

	.image-text {
		width: 310rpx;
		text-align: center;
		margin-top: 8px;
		font-size: 30rpx;
		margin-left: 12rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.vedio_container {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.vedio {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		/* 文本左对齐 */
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.title {
		margin-top: 25rpx;
	}

	.video_container {
		display: flex;
	}

	.myVideo {}

	.pause-button {
		width: 40px;
		height: 40px;
		position: relative;
		right: 385rpx;
		top: 155rpx;
	}

	.page-section {
		margin-left: 33rpx;
		margin-top: 128rpx;
		border-radius: 8rpx;
		position: absolute;

	}

	.container {
		font-family: my-font;

	}
</style>